<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop">
          <div style="width:100%">

              <table class="table1style" style="font-size:12px;white-space: nowrap;">
                  <tr>
                      <td align="center">操作时间</td>
                      <td>

                          <el-date-picker v-model="LogTimeStart" :clearable="false" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width:180px;">
                          </el-date-picker> -

                          <el-date-picker v-model="LogTimeEnd" type="datetime" :clearable="false" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width:180px;"> </el-date-picker>

                      </td>
                      <td align="center">登录用户</td>
                      <td>
                          <rm-ddl-common datatype="userinfo" dataname="用户" v-model="Userno" width="150px"></rm-ddl-common>
                      </td>
                      <td align="center">状态</td>
                      <td>
                          <el-select v-model="Status" clearable>
                              <el-option value="1" label="登录成功"></el-option>
                              <el-option value="2" label="登出"></el-option>
                              <el-option value="0" label="登录失败"></el-option>
                          </el-select>
                      </td>
                      <td align="center">登录消息</td>
                      <td>
                          <el-input v-model="LogContent" style="width:100%`" clearable></el-input>
                      </td>
                      <td align="center">登录电脑</td>
                      <td>
                          <el-input v-model="ComputerName" style="width:150px" clearable></el-input>
                      </td>
                  </tr>
              </table>

              <div class="operation-list">
                  <el-button @click="btnQuery" icon="el-icon-search" type="primary">查询</el-button>
                  <el-button @click="btnClear" icon="el-icon-circle-close">清除</el-button>
                  <el-button @click="btnExport" icon="el-icon-download">导出</el-button>
              </div>

          </div>
      </div>
      <div class="pagecenter">
          <div class="middle-center">
              <vxe-table :data.sync="tableData" :select-config="selectConfig" height="auto" highlight-current-row :loading="loading" highlight-hover-row highlight-hover-column resizable show-header-overflow="tooltip" border fit show-overflow="tooltip" header-align="center" size="mini" stripe ref="xTable1" :sort-config="{trigger: 'cell'}">
                  <vxe-table-column field="username" title="登录用户" width="80px" sortable></vxe-table-column>
                  <vxe-table-column field="logintime" title="登录时间" width="120px" sortable></vxe-table-column>
                  <vxe-table-column field="logcomputer" title="登录电脑" width="100px" sortable></vxe-table-column>
                  <vxe-table-column field="statusname" title="状态" width="80px" sortable>
                      <template v-slot="{ row }">
                          <div :style="{ color: row.status == '0' ? 'red':row.status == '2'?'blue': 'black' }">{{ row.statusname }}</div>
                      </template>
                  </vxe-table-column>
                  <vxe-table-column field="loginmsg" title="登录消息" width="240px" sortable></vxe-table-column>
                  <!-- <vxe-table-column field="loginid" title="标识符" width="240px" sortable></vxe-table-column> -->
              </vxe-table>
          </div>
      </div>

  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
import XLSX from "xlsx";
import FileSaver from "file-saver";
export default {
  name: "MNG195",
  data() {
      return {
          selectConfig: { tigger: "row" },
          tableData: [],
          loading: false,
          //LogTime: ["", ""],
          LogTimeStart: "",
          LogTimeEnd: "",
          ComputerName: "",
          Userno: "",
          Status: "",
          LogContent: "",
          secloading: false,
      };
  },
  created() {
      this.InitDate();
  },
  mounted() {},
  updated() {},
  methods: {
      InitDate() {
          var day1 = new Date();
          day1.setTime(day1.getTime());
          var s1 = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate() + " 00:00:00";
          var day2 = new Date();
          day2.setTime(day2.getTime() + 24 * 60 * 60 * 1000);
          var s2 = day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate() + " 00:00:00";
          this.LogTimeStart = s1;
          this.LogTimeEnd = s2;
      },
      btnQuery() {
          this.Query();
      },
      btnClear() {
          this.InitDate();
          this.ComputerName = "";
          this.Userno = " ";
          this.Status = "";
          this.LogContent = "";
          this.tableData = [];
      },
      btnExport() {
          // this.$refs.xTable.exportCsv({ filename: "LIS836 申请项目对照检验目的" });
          // return false;
          let data = this.getExportData();
          let book = XLSX.utils.book_new();
          let sheet = XLSX.utils.json_to_sheet(data, { skipHeader: true });
          XLSX.utils.book_append_sheet(book, sheet);
          let wbout = XLSX.write(book, { bookType: "xlsx", bookSST: false, type: "binary" });
          let blob = new Blob([this.toBuffer(wbout)], { type: "application/octet-stream" });
          // 保存导出
          FileSaver.saveAs(blob, "MNG195登录日志查询.xlsx");
      },
      getExportData() {
          let datas = this.tableData;
          let tablecolumns = this.$refs.xTable1.getColumns();
          let columns = tablecolumns.filter((item) => item.property);
          let headers = [columns.map((item) => item.title)];
          return headers.concat(
              datas.map((row) => {
                  return columns.map((column) => {
                      return row[column.property];
                  });
              })
          );
      },
      toBuffer(wbout) {
          let buf = new ArrayBuffer(wbout.length);
          let view = new Uint8Array(buf);
          for (let index = 0; index !== wbout.length; ++index) view[index] = wbout.charCodeAt(index) & 0xff;
          return buf;
      },
      Query() {
          this.loading = true;
          this.$tool
              .request({
                  url: "MNG/MNG1/MNG195",
                  method: "post",
                  timeout: 600000,
                  data: {
                      action: "QueyrLog",
                      sdate: this.LogTimeStart,
                      edate: this.LogTimeEnd,
                      userno: this.Userno,
                      computer: this.ComputerName,
                      status: this.Status,
                      msg: this.LogContent,
                  },
              })
              .then((res) => {
                  this.loading = false;
                  if (!res.hasOwnProperty("errcode")) {
                      this.tableData = res.data;
                  }
              })
              .catch((err) => {
                  this.loading = false;
                  this.$alert(err, "错误");
              });
      },
  },
};
</script>

<style scoped>
.pagetop {
  width: 100%;
  height: 72px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
  overflow-x: auto;
  overflow-x: overlay;
}

.pagecenter {
  position: absolute;
  top: 76px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}
table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}
.table1style {
  padding: 0px 5px 0px 5px;
  font-size: 12px;
}
.operation-list {
  float: right;
  margin-right: 5px;
  margin-bottom: 5px;
}
::-webkit-scrollbar {
  width: 0px;
  height: 5px;
  border: 4px solid white;
}
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
::v-deep .fail {
  color: red;
}
</style>